<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import {
  User,
  Reading,
  Collection,
  DataLine,
  SwitchButton
} from '@element-plus/icons-vue'
import * as echarts from 'echarts'

const router = useRouter()

const isCollapse = ref(false)
const chartRef = ref(null)
const chartInstance = ref(null)
const courseStatistics = ref([
  { category: '前端', totalCourses: 12 },
  { category: '后端', totalCourses: 8 },
  { category: 'AI', totalCourses: 5 }
])
const courseWatchCount = ref([
  { chapter: 'Vue3入门', views: 120 },
  { chapter: 'Node实战', views: 80 }
])

const menuItems = [
  {
    title: '用户管理',
    icon: User,
    path: '/admin/users'
  },
  {
    title: '课程管理',
    icon: Reading,
    path: '/admin/courses'
  },
  {
    title: '章节管理',
    icon: Collection,
    path: '/admin/chapters'
  },
  {
    title: '数据统计',
    icon: DataLine,
    path: '/admin/statistics'
  }
]

const handleLogout = () => {
  router.push('/admin/login')
}

const updateChart = () => {
  if (!chartRef.value) return
  if (!chartInstance.value) {
    chartInstance.value = echarts.init(chartRef.value)
  }
  const option = {
    title: { text: '课程类型分布', left: 'center' },
    tooltip: { trigger: 'item' },
    legend: { bottom: 0 },
    series: [
      {
        name: '课程数',
        type: 'pie',
        radius: '60%',
        data: courseStatistics.value.map(item => ({
          value: item.totalCourses,
          name: item.category
        }))
      }
    ]
  }
  chartInstance.value.setOption(option)
}

onMounted(() => {
  updateChart()
})
</script>

<template>
  <el-container class="main-layout-container">
    <el-aside :width="isCollapse ? '64px' : '200px'">
      <div class="logo">
        <span>在线教育平台</span>
      </div>
      <el-menu
        :default-active="$route.path"
        class="el-menu-vertical"
        :collapse="isCollapse"
        router
      >
        <el-menu-item
          v-for="item in menuItems"
          :key="item.path"
          :index="item.path"
        >
          <el-icon>
            <component :is="item.icon" />
          </el-icon>
          <template #title>{{ item.title }}</template>
        </el-menu-item>
      </el-menu>
    </el-aside>

    <el-container direction="vertical" style="flex-direction: column !important;">
      <el-header>
        <div class="header-left">
          <el-icon
            class="collapse-btn"
            @click="isCollapse = !isCollapse"
          >
            <SwitchButton />
          </el-icon>
        </div>
        <div class="header-right">
          <el-dropdown @command="handleLogout">
            <span class="user-info">
              管理员
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>

      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<style scoped>
.main-layout-container {
  height: 100vh;
  display: flex;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
}

.el-aside {
  background-color: #304156;
  transition: width 0.3s;
  overflow: hidden;
  height: 100%;
}

.el-header {
  background-color: white;
  border-bottom: 1px solid #e6e6e6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 60px;
}

.el-main {
  background-color: #f0f2f5;
  flex: 1;
  padding: 20px 0;
  overflow: auto;
  min-width: 0;
  box-sizing: border-box;
  width: 100%;
}

.logo {
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  color: white;
  font-size: 18px;
  font-weight: bold;
}

.logo span {
  margin-left: 12px;
}

.el-menu-vertical:not(.el-menu--collapse) {
  width: 200px;
}

.el-menu {
  border-right: none;
  background-color: #304156;
}

.el-menu-item {
  color: #bfcbd9;
}

.el-menu-item:hover {
  background-color: #263445;
}

.el-menu-item.is-active {
  background-color: #1890ff !important;
  color: white;
}

.collapse-btn {
  font-size: 24px;
  cursor: pointer;
  color: #606266;
}

.user-info {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #606266;
}

.statistics-container {
  display: flex;
  gap: 32px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  justify-content: flex-start;
}

.chart-card, .table-card {
  flex: 1;
  min-width: 320px;
  max-width: 500px;
}

.empty-tip {
  text-align: center;
  color: #bbb;
  margin-top: 40px;
}

/* 强制内部 el-container 为纵向布局，解决其 flex-direction 被覆盖的问题 */
.el-container.is-vertical {
  flex-direction: column !important;
}
</style> 